<template>
  <div class="filter-box" ref="box">
    <transition name="expand2">
      <div class="opacityDom" @click="hidden" v-show="$parent.filterOpenState" ref="opacityDom"></div>
    </transition>
    <transition name="expand">
      <div class="filter-view" v-show="$parent.filterOpenState">
        <!-- tab -->
        <ul class="tab-row flex">
          <li
            v-for="(tab, index) in tabList"
            :key="index"
            class="tab flex flex-1 align-items-center justify-content-center"
            :class="{'active': tab.id === curTab}"
            @click="tabClick(tab)">
            {{tab.name}}
          </li>
        </ul>
        <!-- 时间搜索项 -->
        <ul class="time-row">
          <!-- 时间 -->
          <li class="filter-item clearfix" v-if="needTime">
            <div class="border-bottom">
              <div class="filter-tab-button flex align-items-center justify-content-center">
                <a :class="{'active': showTimeModule === 1}" @click="choiceTimeModule(1)">近1年</a>
                <a :class="{'active': showTimeModule === 2}" @click="choiceTimeModule(2)">近30天</a>
                <a :class="{'active': showTimeModule === 3}" @click="choiceTimeModule(3)">近7天</a>
                <a :class="{'active': showTimeModule === 4}" @click="choiceTimeModule(4)">自定义</a>
              </div>
              <!-- 近1年 -->
              <div class="date-row flex align-items-center justify-content-space-between" v-show="showTimeModule === 1">
                <div class="date-item">
                  <datetime
                    v-model="rStartYear"
                    :readonly="true"
                    :start-date="minTime"
                    :end-date="maxTime"/>
                </div>
                <span class="date-split">-</span>
                <div class="date-item">
                  <datetime
                    v-model="rEndYear"
                    :readonly="true"
                    :start-date="minTime"
                    :end-date="maxTime"/>
                </div>
              </div>
              <!-- 近30天 -->
              <div class="date-row flex align-items-center justify-content-space-between" v-show="showTimeModule === 2">
                <div class="date-item">
                  <datetime
                    v-model="r30StartTime"
                    :readonly="true"
                    :start-date="minTime"
                    :end-date="maxTime"/>
                </div>
                <span class="date-split">-</span>
                <div class="date-item">
                  <datetime
                    v-model="r30EndTime"
                    :readonly="true"
                    :start-date="minTime"
                    :end-date="maxTime"/>
                </div>
              </div>
              <!-- 近7天 -->
              <div class="date-row flex align-items-center justify-content-space-between" v-show="showTimeModule === 3">
                <div class="date-item">
                  <datetime
                    v-model="r7StartTime"
                    :readonly="true"
                    :start-date="minTime"
                    :end-date="maxTime"/>
                </div>
                <span class="date-split">-</span>
                <div class="date-item">
                  <datetime
                    v-model="r7EndTime"
                    :readonly="true"
                    :start-date="minTime"
                    :end-date="maxTime"/>
                </div>
              </div>
              <!-- 自定义 -->
              <div class="date-row flex align-items-center justify-content-space-between" v-show="showTimeModule === 4">
                <div class="date-item op">
                  <datetime
                    v-model="startTime"
                    :start-date="minTime"
                    :end-date="maxTime"/>
                </div>
                <span class="date-split">-</span>
                <div class="date-item op">
                  <datetime
                    v-model="endTime"
                    :start-date="minTime"
                    :end-date="maxTime"/>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- 来源 -->
        <!--
        <ul class="filter-content" v-show="curTab === tabList[0].id">
          <li class="filter-item clearfix">
            <h3 class="title">来源类型</h3>
            <div>
              <span class="item" :class="[{'item-active' : hasChooseAllSource}]" @click="addAllSource">全部
              </span><span
                class="item"
                v-for="(item, index) in sourceList"
                :key="index"
                @click="addSource(item)"
                :class="[{'item-active' : item.hasChoose, 'item-active-border': curSource === item.value}]">
                {{item.name}}
              </span>
            </div>
          </li>
          <li class="filter-item clearfix" v-if="curSource !== ''">
            <h3 class="title">来源明细-{{sourceList[curSourceIndex].name}}</h3>
            <div v-if="curSourceIndex !== -1">
              <span class="item-2" :class="[{'item-active' : sourceList[curSourceIndex].chooseAll}]" @click="addAllSourceDetail">全部
              </span><span
                class="item-2"
                v-for="(jItem, jIndex) in sourceList[curSourceIndex].list"
                :key="jIndex"
                @click="addSourceDetail(jItem)"
                :class="[{'item-active': jItem.choose}]">
                {{jItem.name}}
              </span>
            </div>
          </li>
        </ul>
        -->
        <ul class="filter-content" v-show="curTab === tabList[0].id">
          <li class="filter-item clearfix">
            <h3 class="title">来源类型</h3>
            <div>
              <span class="item" :class="[{'item-active' : hasChooseAllSource2}]" @click="addAllSource2">全部
              </span><span
                class="item"
                v-for="(item, index) in sourceList"
                :key="index"
                @click="addSource2(item)"
                :class="[{'item-active' : item.hasChoose}]">
                {{item.name}}
              </span>
            </div>
          </li>
        </ul>
        <!-- 分类 -->
        <ul class="filter-content" v-show="curTab === tabList[1].id">
          <li class="filter-item clearfix">
            <h3 class="title">一级分类</h3>
            <div>
              <span class="item-2" :class="[{'item-active' : curDimensionIndex === -1}]" @click="addAllCatalog">全部
              </span><span
                class="item-2"
                v-for="(item, index) in catalogList"
                :key="index"
                :class="[{'item-active' : item.value === dimension}]"
                @click="addCatelog(item)">
                {{item.name}}
              </span>
            </div>
          </li>
          <li class="filter-item clearfix" v-if="curDimensionIndex !== -1">
            <h3 class="title">二级分类</h3>
            <div>
              <span class="item-2" :class="[{'item-active' : curAttributeIndex === -1}]" @click="addAllAttribute">全部
              </span><span
                class="item-2"
                v-for="(item, index) in catalogList[curDimensionIndex].attributeList"
                :key="index"
                :class="[{'item-active' : item.value === attribute}]"
                @click="addAttribute(item)">
                {{item.name}}
              </span>
            </div>
          </li>
          <li class="filter-item clearfix" v-if="curAttributeIndex !== -1">
            <h3 class="title">三级分类</h3>
            <div>
              <span class="item-2" :class="[{'item-active' : property === ''}]" @click="addAllProperty">全部
              </span><span
                class="item-2"
                v-for="(item, index) in catalogList[curDimensionIndex].attributeList[curAttributeIndex].propertyList"
                :key="index"
                :class="[{'item-active' : item.value === property}]"
                @click="addProperty(item)">
                {{item.name}}
              </span>
            </div>
          </li>
        </ul>
        <!-- 城市 -->
        <ul class="filter-content" v-show="curTab === tabList[2].id">
          <li class="filter-item clearfix">
            <div>
              <span class="item" @click="clearAllCity">清空
              </span><span class="item item-active" @click="addAllCity">全选
              </span>
            </div>
          </li>
          <li
            v-for="(item, index) in cityList"
            :key="index"
            class="filter-item clearfix"
            >
            <h3 class="title">{{item.name}}</h3>
            <div class="">
              <span
                class="item"
                v-for="(jItem, jIndex) in item.list"
                :key="jIndex"
                :class="{'item-active': curCity.indexOf(jItem.name) > -1}"
                @click="addCity(jItem)">
                {{jItem.name}}
              </span>
            </div>
          </li>
        </ul>
        <!-- 公司 -->
        <ul class="filter-content" v-show="curTab === tabList[3].id">
          <li class="filter-item clearfix">
            <div>
              <span class="item" @click="clearAllCompany">清空
              </span><span class="item item-active" @click="addAllCompany">全选
              </span>
            </div>
          </li>
          <li
            v-for="(item, index) in companyList"
            :key="index"
            class="filter-item clearfix"
            >
            <h3 class="title">{{item.name}}</h3>
            <div class="">
              <span
                class="item"
                v-for="(jItem, jIndex) in item.list"
                :key="jIndex"
                :class="{'item-active': curCompany.indexOf(jItem.name) > -1}"
                @click="addCompany(jItem)">
                {{jItem.name}}
              </span>
            </div>
          </li>
        </ul>
        <!-- 按钮 -->
        <ul class="btn-row flex">
          <li class="btn flex flex-1 align-items-center justify-content-center" @click="reset">重置</li>
          <li class="btn flex flex-1 align-items-center justify-content-center submit-btn" @click="doFilter">完成</li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script>
import { Datetime } from 'vux'

const tabList = [
  { id: 1, name: '来源' },
  { id: 2, name: '分类' },
  { id: 3, name: '城市' },
  { id: 4, name: '公司' }
]

const DATE_TIME = 24 * 60 * 60 * 1000

const now = new Date()
const startTime = new Date(now.getTime() - 29 * DATE_TIME).format('yyyy-MM-dd')
const endTime = new Date(now.getTime()).format('yyyy-MM-dd')
const minTime = '2017-01-01'
const maxTime = endTime
const rStartYear = new Date(now.getFullYear() + '').format('yyyy-MM-dd')
const rEndYear = endTime
const r30StartTime = startTime
const r30EndTime = endTime
const r7StartTime = new Date(now.getTime() - 6 * DATE_TIME).format('yyyy-MM-dd')
const r7EndTime = endTime

export default {
  props: {
    needTime: {
      type: Boolean,
      default: false
    },
    needSource: {
      type: Boolean,
      default: false
    },
    needCatalog: {
      type: Boolean,
      default: false
    },
    needCity: {
      type: Boolean,
      default: false
    },
    needCompany: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showTimeModule: 4,
      minTime,
      maxTime,
      rStartYear,
      rEndYear,
      r30StartTime,
      r30EndTime,
      r7StartTime,
      r7EndTime,
      startTime,
      endTime,
      tabList,
      curTab: tabList[0].id,
      sourceList: [],
      curSource: '',
      curSourceDetail: '',
      cityList: [],
      curCity: '',
      catalogList: [],
      dimension: '',
      attribute: '',
      property: '',
      companyList: [],
      curCompany: ''
    }
  },
  computed: {
    curSourceIndex () {
      let result = -1
      this.sourceList.forEach((item, index) => {
        if (item.value === this.curSource) {
          result = index
          return false
        }
      })
      return result
    },
    hasChooseAllSource () {
      let chooseAll = true
      let chooseNo = true
      this.sourceList.forEach(item => {
        item.list.forEach(jItem => {
          if (jItem.choose === false) {
            chooseAll = false
            return false
          }
        })
      })
      this.sourceList.forEach(item => {
        item.list.forEach(jItem => {
          if (jItem.choose === true) {
            chooseNo = false
            return false
          }
        })
      })
      return chooseAll || chooseNo
    },
    hasChooseAllSource2 () {
      let result = true
      this.sourceList.forEach(item => {
        if (item.hasChoose === false) {
          result = false
          return false
        }
      })
      return result
    },
    curDimensionIndex () {
      let result = -1
      this.catalogList.forEach((item, index) => {
        if (item.value === this.dimension) {
          result = index
          return false
        }
      })
      return result
    },
    curAttributeIndex () {
      let result = -1
      if (this.curDimensionIndex !== -1) {
        this.catalogList[this.curDimensionIndex].attributeList.forEach((item, index) => {
          if (item.value === this.attribute) {
            result = index
            return false
          }
        })
      }
      return result
    }
  },
  methods: {
    hidden () {
      setTimeout(() => {
        this.$parent.filterOpenState = false
      }, 200)
    },
    reset () {
      if (this.needTime) {
        this.startTime = startTime
        this.endTime = endTime
        this.showTimeModule = 4
      }
      if (this.needCity) {
        this.curCity = ''
      }
      if (this.needCompany) {
        this.curCompany = ''
      }
      if (this.needCatalog) {
        this.dimension = ''
        this.attribute = ''
        this.property = ''
      }
      if (this.needSource) {
        this.curSource = ''
        this.sourceList.forEach(item => {
          item.chooseAll = false
          item.hasChoose = false
          item.list.forEach(jItem => {
            jItem.choose = false
          })
        })
      }
    },
    doFilter () {
      const filterConditions = {}
      try {
        if (this.needTime) {
          let startDate = ''
          let endDate = ''
          let dateSeg = ''
          switch (this.showTimeModule) {
            case 1:
              startDate = this.rStartYear
              endDate = this.rEndYear
              dateSeg = 'year'
              break
            case 2:
              startDate = this.r30StartTime
              endDate = this.r30EndTime
              dateSeg = 'month'
              break
            case 3:
              startDate = this.r7StartTime
              endDate = this.r7EndTime
              dateSeg = 'other'
              break
            case 4:
              startDate = this.startTime
              endDate = this.endTime
              dateSeg = 'other'
              break
          }
          if (new Date(startDate).getTime() > new Date(endDate).getTime()) {
            this.$vux.alert.show({
              title: '提示',
              content: '开始时间不能大于结束时间'
            })
            return
          }
          filterConditions.startTime = startDate
          filterConditions.endTime = endDate
          filterConditions.dateSeg = dateSeg
        }
        if (this.needCity) {
          filterConditions.cityName = this.curCity
        }
        if (this.needCompany) {
          filterConditions.companys = this.curCompany
        }
        if (this.needCatalog) {
          filterConditions.dimension = this.dimension
          filterConditions.attribute = this.attribute
          filterConditions.property = this.property
        }
        if (this.needSource) {
          const array = []
          this.sourceList.forEach(item => {
            if (item.hasChoose) {
              array.push(item.name)
            }
          })
          filterConditions.source = array.toString()
        }
        // if (this.needSource) {
        //   const array = []
        //   this.sourceList.forEach((item, i) => {
        //     item.list.forEach((jItem, j) => {
        //       if (jItem.choose === true) {
        //         array.push(`${i}-${j}`)
        //       }
        //     })
        //   })
        //   filterConditions.from = array.toString()
        // }
        this.$emit('search', filterConditions)
      } catch (err) {
        console.error(err)
      }
    },
    tabClick (item) {
      this.curTab = item.id
    },
    choiceTimeModule (value) {
      this.showTimeModule = value
    },
    formatYear (time) {
      return time ? new Date(time).format('yyyy年') : ''
    },
    getSourceList () {
      return new Promise((resolve, reject) => {
        // this.$http.getData({
        //   api: '/main/getSourceList'
        // })
        this.$http.get('/main/getSourceList')
          .then(res => {
            const result = res.data
            this.sourceList = []
            this.curSource = ''
            result.forEach((item, index) => {
              const source = item.source ? item.source.split(',') : []
              this.sourceList.push({
                name: item.web_type,
                value: item.web_type,
                list: [],
                chooseAll: false,
                hasChoose: false
              })
              source.forEach(jItem => {
                this.sourceList[index].list.push({
                  name: jItem,
                  value: jItem,
                  choose: false
                })
              })
            })
            resolve()
          })
      })
    },
    addAllSource () {
      this.curSource = ''
      this.sourceList.forEach(item => {
        item.chooseAll = false
        item.hasChoose = false
        item.list.forEach(jItem => {
          jItem.choose = false
        })
      })
    },
    addSource (target) {
      this.curSource = target.value
    },
    addSourceDetail (target) {
      this.sourceList[this.curSourceIndex].list.forEach(item => {
        if (item.name === target.name) {
          item.choose = !item.choose
        }
      })
      const chooseAll = this.sourceList[this.curSourceIndex].list.every(item => item.choose)
      const hasChoose = this.sourceList[this.curSourceIndex].list.some(item => item.choose)
      this.sourceList[this.curSourceIndex].chooseAll = chooseAll
      this.sourceList[this.curSourceIndex].hasChoose = hasChoose
    },
    addAllSourceDetail () {
      if (this.sourceList[this.curSourceIndex].chooseAll) {
        this.sourceList[this.curSourceIndex].chooseAll = false
        this.sourceList[this.curSourceIndex].list.forEach(item => {
          item.choose = false
        })
        this.sourceList[this.curSourceIndex].hasChoose = false
      } else {
        this.sourceList[this.curSourceIndex].chooseAll = true
        this.sourceList[this.curSourceIndex].list.forEach(item => {
          item.choose = true
        })
        this.sourceList[this.curSourceIndex].hasChoose = true
      }
    },
    // source2
    addSource2 (target) {
      this.sourceList.forEach(item => {
        if (item.name === target.name) {
          item.hasChoose = !item.hasChoose
        }
      })
    },
    addAllSource2 () {
      if (this.hasChooseAllSource2) {
        this.sourceList.forEach(item => {
          item.hasChoose = false
        })
      } else {
        this.sourceList.forEach(item => {
          item.hasChoose = true
        })
      }
    },
    getCatalogList () {
      return new Promise((resolve, reject) => {
        this.$http.get('/main/getCatalog')
          .then(res => {
            const data = res.data
            this.catalogList = []
            this.dimension = ''
            this.attribute = ''
            this.property = ''
            // dimension
            const dimensionArr = []
            data.forEach(item => {
              dimensionArr.indexOf(item.dimension) < 0 && dimensionArr.push(item.dimension)
            })
            dimensionArr.forEach(item => {
              this.catalogList.push({
                name: item,
                value: item,
                attributeList: [],
                chooseAll: true
              })
            })
            // attribute
            this.catalogList.forEach(catalog => {
              data.forEach(item => {
                if (catalog.name === item.dimension) {
                  const attributeList = catalog.attributeList.map(item => item.name)
                  attributeList.indexOf(item.attribute) < 0 && catalog.attributeList.push({
                    name: item.attribute,
                    value: item.attribute,
                    chooseAll: true,
                    propertyList: []
                  })
                }
              })
            })
            // property
            this.catalogList.forEach(catalog => {
              catalog.attributeList.forEach(attribute => {
                data.forEach(item => {
                  if (attribute.name === item.attribute) {
                    attribute.propertyList.push({
                      name: item.property,
                      value: item.property,
                      choose: false
                    })
                  }
                })
              })
            })
            this.$store.commit('setCatalogList', this.catalogList)
            resolve()
          })
      })
    },
    addAllCatalog () {
      this.dimension = ''
      this.attribute = ''
      this.property = ''
    },
    triggerAddCatelog (nav) {
      if (nav === '热点推荐') {
        this.dimension = ''
      } else {
        this.dimension = nav
      }
      this.attribute = ''
      this.property = ''
    },
    addCatelog (target) {
      this.dimension = target.value
      this.attribute = ''
    },
    addAllAttribute () {
      this.attribute = ''
    },
    addAttribute (target) {
      this.attribute = target.value
      this.property = ''
    },
    addAllProperty () {
      this.property = ''
    },
    addProperty (target) {
      this.property = target.value
    },
    getCityList () {
      return new Promise((resolve, reject) => {
        this.$http.get('/main/getCityList')
          .then(res => {
            const data = res.data
            const pinyinList = data.filter(item => item.type === '按省份')
            this.cityList = []
            pinyinList.forEach((item, index) => {
              this.cityList.push({
                name: item.name,
                value: item.name,
                list: []
              })
              const cityList = item.city_list ? item.city_list.split(',') : []
              cityList.forEach(city => {
                this.cityList[index].list.push({
                  name: city,
                  value: city
                })
              })
            })
            resolve()
          })
      })
    },
    addAllCity () {
      const cityList = []
      this.cityList.forEach(item => {
        item.list.forEach(jItem => {
          cityList.push(jItem.name)
        })
      })
      this.curCity = cityList.toString()
    },
    clearAllCity () {
      this.curCity = ''
    },
    addCity (target) {
      const array = this.curCity ? this.curCity.split(',') : []
      if (array.indexOf(target.name) > -1) {
        array.splice(array.indexOf(target.name), 1)
      } else {
        array.push(target.name)
      }
      this.curCity = array.toString()
    },
    getCompanyList () {
      return new Promise((resolve, reject) => {
        this.$http.get('/main/getCompanyList', {})
          .then(res => {
            const data = res.data
            const pinyinList = data.filter(item => item.type === '按拼音')
            this.companyList = []
            pinyinList.forEach((item, index) => {
              this.companyList.push({
                name: item.name,
                value: item.name,
                list: []
              })
              const companyList = item.company ? item.company.split(',') : []
              companyList.forEach(company => {
                this.companyList[index].list.push({
                  name: company,
                  value: company
                })
              })
            })
            resolve()
          })
      })
    },
    addAllCompany () {
      const companyList = []
      this.companyList.forEach(item => {
        item.list.forEach(jItem => {
          companyList.push(jItem.name)
        })
      })
      this.curCompany = companyList.toString()
    },
    clearAllCompany () {
      this.curCompany = ''
    },
    addCompany (target) {
      const array = this.curCompany ? this.curCompany.split(',') : []
      if (array.indexOf(target.name) > -1) {
        array.splice(array.indexOf(target.name), 1)
      } else {
        array.push(target.name)
      }
      this.curCompany = array.toString()
    },
    init () {
      Promise.all([this.getSourceList(), this.getCatalogList(), this.getCityList(), this.getCompanyList()])
        .then(() => {
          // this.doFilter()
        })
    }
  },
  created () {
    this.init()
  },
  mounted () {
    const opacityDom = this.$refs.opacityDom
    opacityDom.addEventListener('touchmove', event => {
      event.preventDefault()
    })
  },
  components: {
    Datetime
  }
}
</script>
<style lang="less">
  .weui-cell {
    padding: 0 !important;
  }
  .weui-cell__ft {
    text-align: center !important;
  }
  .weui-cell_access .weui-cell__ft:after {
    display: none !important;
  }
</style>
<style lang="less" scoped>
  @import '../../assets/less/default.less';
  @border-color: #dfe3e6;
  @button-bg: #f3f3f3;
  .filter-box{
    // width: 7.5rem;
    width: 100%;
    position: fixed;
    height: 100%;
    bottom: auto;
    top: 0;
    // bottom: 0;
    z-index: 510;
  }
  .opacityDom{
    // position: fixed;
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(0,0,0);
    width: 100%;
    height: 100%;
    z-index: 511;
    opacity: .3;
  }
  .filter-view {
    // position: fixed;
    position: absolute;
    top: @header-height;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 512;
    left: 20%;
    display: flex;
    flex-direction: column;
    .filter-content {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      flex-grow: 1;
    }
    .filter-item {
      padding: 0 0.3rem;
    }
    .title {
      padding-bottom: 0.1rem;
      margin-top: 0.1rem;
      margin-bottom: 0.1rem;
      font-weight: normal;
      font-size: 0.32rem;
      color: #333;
    }
    .item,
    .item-2 {
      position: relative;
      display: inline-block;
      margin-right: 0.2rem;
      margin-bottom: 0.2rem;
      height: .56rem;
      line-height: .56rem;
      font-size: .28rem;
      text-align: center;
      border: 1px solid @border-color;
      border-radius: 3px;
      color: @text-regular;
      word-break:keep-all;
      white-space:nowrap;
      overflow: hidden;
    }
    .item {
      width: 30%;
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
    .item-2 {
      width: 47%;
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
    .item-3 {
      width: 30%;
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
    .item-active {
      color: @red;
      background-color: @red-bg;
      border: 1px solid @red-bg;
    }
    .item-active-border {
      border: 1px solid @red;
    }
  }
  .tab-row {
    height: 1rem;
    flex: 0 0 1rem;
    background-color: @white;
    .tab {
      font-size: 0.32rem;
      color: @text-primary;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid @border-color;
      background-color: @button-bg;
      &.active {
        border: 1px solid transparent;
        background-color: transparent;
        color: @red;
      }
    }
  }
  .btn-row {
    height: 0.8rem;
    flex: 0 0 0.8rem;
    box-sizing: border-box;
    border-top: 1px solid @border-color;
    background-color: @white;
    .btn {
      height: 100%;
      color: @text-regular;
      font-size: 0.36rem;
    }
    .submit-btn {
      background-color: @red;
      color: @white;
    }
  }
  .time-row {
    flex: 0 0 1.6rem;
    margin-top: 0.2rem;
    .filter-tab-button {
      background-color: #f3f3f3;
      border-radius: 3px;
      margin-bottom: 0.2rem;
      a {
        @height: 0.55rem;
        font-size: 0.28rem;
        width: 25%;
        height: @height;
        line-height: @height;
        color: @text-primary;
        text-align: center;
        position: relative;
        &:after {
          content: '';
          display: block;
          background: @border-color;
          width: 1px;
          height: 0.3rem;
          position: absolute;
          right: 0;
          top: 0.15rem;
        }
        &:last-child {
          &:after {
            display: none;
          }
        }
        &.active {
          color: @red;
        }
      }
    }
    .date-row {
      margin-bottom: 0.2rem;
    }
    .date-item {
      box-sizing: border-box;
      width: 45%;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.28rem;
      border: 1px solid @border-color;
      text-align: center;
      .vux-datetime {
        color: @text-regular;
      }
      &.op {
        position: relative;
        .vux-datetime {
          color: @text-primary;
        }
        &:after {
          content: '';
          display: block;
          @h: 0.1rem;
          width: @h;
          height: @h;
          border-right: 2px solid #b8b8bc;
          border-bottom: 2px solid #b8b8bc;
          position: absolute;
          right: 8px;
          top: 0.14rem;
          transform-origin: center center;
          transform: rotate(45deg);
        }
      }
    }
  }
  .border-bottom {
    border-bottom: 1px solid @border-color;
  }
</style>
